<template>
  <div>
    <!-- <div class="channelTop">
      <span>国内通道</span>
      <a-button type="primary" @click="xxslSubmit">速率下发</a-button>
    </div> -->
    <a-tabs default-active-key="activeKey" @change="onChange">
      <a-tab-pane key="1" tab="国内通道">
        <a-button style="margin-bottom: 10px;" type="primary" @click="xxslSubmit">速率下发</a-button>
        <span style="color: #fff;margin-left: 10px;">说明：国内通道信息速率可以根据需要修改，编辑单个或多个通道信息速率后，点击按钮统一下发</span>
        <div  class="channel">
          <div class="channelBox" v-for="item in datalist" :key="item.tdh">
          <div class="channelContent">
            <div>{{ item.tdh }}</div>
            <div>
              <a-select
                v-if="item.editState && item.tdh <= 360"
                placeholder="请选择信息速率"
                style="width: 70%;display: inline-block;"
                @change="xxslChange"
              >
                <a-select-option v-for="i in xxslListFront" :key="i.id" :value="i.content">{{
                  i.content
                }}</a-select-option>
              </a-select>
              <a-select
                v-if="item.editState && item.tdh > 360"
                placeholder="请选择信息速率"
                style="width: 70%;display: inline-block;"
                @change="xxslChange"
              >
                <a-select-option v-for="i in xxslListLater" :key="i.id" :value="i.content">{{
                  i.content
                }}</a-select-option>
              </a-select>
              <a @click="handleEdit(item)" v-if="item.sl == 0 && !item.editState">600bps</a>
              <a @click="handleEdit(item)" v-if="item.sl == 1 && !item.editState">900bps</a>
              <a @click="handleEdit(item)" v-if="item.sl == 10 && !item.editState">1800bps</a>

              <span>
                <span v-if="item.editState" class="a_icon">
                  <a-tooltip>
                    <template slot="title">提交</template>
                    <a-icon type="check" @click="handleSubmit(item)" />
                  </a-tooltip>
                </span>
              </span>
            </div>
          </div>
        </div>
        </div>
        
      </a-tab-pane>
      <a-tab-pane key="2" tab="国际通道">
         <!-- <a-button style="margin-bottom: 10px;" type="primary" @click="xxslSubmit">速率下发</a-button> -->
        <div style="color: #fff;margin-bottom: 10px;">说明：国际通道信息速率不可以修改</div>
        <div  class="channel">
          <div class="channelBox" v-for="item in datalistInt" :key="item.tdh">
          <div class="channelContent">
            <div>{{ item.tdh }}</div>
            <div>
              <!-- <a-select
                v-if="item.editState && item.tdh <= 360"
                placeholder="请选择信息速率"
                style="width: 70%;display: inline-block;"
                @change="xxslChange"
              >
                <a-select-option v-for="i in xxslListFront" :key="i.id" :value="i.content">{{
                  i.content
                }}</a-select-option>
              </a-select>
              <a-select
                v-if="item.editState && item.tdh > 360"
                placeholder="请选择信息速率"
                style="width: 70%;display: inline-block;"
                @change="xxslChange"
              >
                <a-select-option v-for="i in xxslListLater" :key="i.id" :value="i.content">{{
                  i.content
                }}</a-select-option>
              </a-select> -->
              <span>100bps</span>
              <!-- <a @click="handleEdit(item)" v-if="item.sl == 1 && !item.editState">900bps</a>
              <a @click="handleEdit(item)" v-if="item.sl == 10 && !item.editState">1800bps</a> -->

              <span>
                <span v-if="item.editState" class="a_icon">
                  <a-tooltip>
                    <template slot="title">提交</template>
                    <a-icon type="check" @click="handleSubmit(item)" />
                  </a-tooltip>
                </span>
              </span>
            </div>
          </div>
        </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { putAction } from '../../../api/manage'
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  // mixins: [JeecgListMixin],
  props: {},
  components: {},

  data() {
    return {
      datalist: [],
      datalistInt: [],
      xxslListFront: [
        { id: 1, content: '600bps' },
        { id: 2, content: '900bps' }
      ],
      xxslListLater: [
        { id: 1, content: '600bps' },
        { id: 2, content: '900bps' },
        { id: 3, content: '1800bps' }
      ],
      dataInfo: {},
      url: {
        list: '/dcpr/dcprPassagewaySlInit/list',
        modifySl: 'dcpr/dcprPassagewaySlTemp/modifySl',
        slTempList: '/dcpr/dcprPassagewaySlTemp/list',
        slEdit: 'dcpr/dcprPassagewaySlTemp/edit', //修改某个通道速率接口
        editList: '/dcpr/dcprPassagewaySlTemp/list',
      },
      activeKey: 1
    }
  },
  computed: {},
  watch: {},
  created() {
    // console.log('getListData()');
    // this.getListData()
  },
  mounted() {},
  methods: {
    //点击信息速率  修改当前数据状态 用来控制下拉框、对钩显示与隐藏
    handleEdit(record) {
      this.dataInfo = record
      record.editState = true
      this.$forceUpdate()
    },
    //点击对钩  修改当前数据状态 用来控制下拉框、对钩显示与隐藏
    handleSubmit(record) {
      console.log('record', record)
      putAction(this.url.slEdit, record).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          // this.getListData()
          this.getEditList()
          record.editState = false
          this.$forceUpdate()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //下拉框所选内容发生改变
    xxslChange(value) {
      if (value == '600bps') {
        this.dataInfo.sl = 0
      } else if (value == '900bps') {
        this.dataInfo.sl = 1
      } else if (value == '1800bps') {
        this.dataInfo.sl = 10
      }
    },
    //点击速率下发
    xxslSubmit() {
      this.datalist.sort((a, b) => a.tdh - b.tdh)
      let slList = this.datalist.map(item => item.sl)
      let slStr = slList.join('')
      let hexString = `0x080032${slStr}`
      getAction(this.url.modifySl, { hexString: slStr }).then(res => {
        if(res == '下发失败') {
          this.$message.error(res)
        }else if(res == '下发成功') {
          this.$message.success(res)
        }
        if (res.success) {
          this.getListData()
        } else {
          // this.$message.error(res.message)
        }
      })
    },
    getListData() {
      getAction(this.url.list, { pageSizie: 380 }).then(res => {
        if (res.success) {
          this.datalist = res.result.records || []
          this.datalist = this.datalist.map(item => {
            item.editState = false
            return item
          })
        }
      })
    },
    getListDataInt() {
      getAction(this.url.list, { pageSizie: 33 }).then(res => {
        if (res.success) {
          let list = res.result.records || []
          list = list.slice(0,33)
          this.datalistInt = list.map(item => {
            item.editState = false
            return item
          })
        }
      })
    },
    onChange(key) {
      this.activeKey = key
      if(key == 2) {
        this.getListDataInt()
      }
    },
    getEditList() {
      getAction(this.url.editList, { pageSizie: 380 }).then(res => {
        if (res.success) {
          this.datalist = res.result.records || []
          this.datalist = this.datalist.map(item => {
            item.editState = false
            return item
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.channel {
  display: flex;
  flex-wrap: wrap;
  .channelTop {
    width: 100%;
    display: flex;
    justify-content: space-between;
    color: white;
    padding: 0 10px 0 5px;
    margin-bottom: 10px;
  }

  .channelBox {
    position: relative;
    width: 10%;
    // height:220px;
    padding: 15px 10px;
    // margin: 5px;
    border: 1px solid #ebcbbe;
    // display: flex;
    // flex-wrap: wrap;

    .channelContent {
      // display: flex;
      // flex-direction: column;
      // justify-content: center;
      // align-items: center;
      text-align: center;
      color: white;
    }
    .a_icon {
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
</style>
